<template>
	<view class="card">
		<view class="title absolute">
			<text>常见问题</text>
		</view>
		
		<view class="list mt-30 mb-10">
			<view v-for="(item, index) of list" :class="[index !== list.length - 1 ? 'mb-40' : '','list_item p-30']" :key="item.id">
				<text class="list_item_title mb-30">{{ item.title }}</text>
				<text class="list_item_describe">{{ item.describe }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const list = reactive([
		{
			id: 1,
			title: '成为推广方，我需要支付合作费用吗？',
			describe: '不需要，您只需提交资料等待审核，审核通过后即可开始分享赚收益！（其他收费项目除外）'
		},
		{
			id: 2,
			title: '成为推广方，产生了收益，我的收益如何计算呢？',
			describe: '除报告查询所产生的成本费用，所有收益都是您的收入，即您设置的查询价-报告成本价=您的收益，多分享多得哦~'
		},
		{
			id: 3,
			title: '我推广报告，客户支付后，收益会如何结算给我呢？',
			describe: '客户支付后，你的收益将自动计入到您的可提现余额中，您可随时提现。'
		},
		{
			id: 4,
			title: '成为推广方后，如何生成自己的推广码呢？',
			describe: '成为推广方后，进入数据精灵App-我是推广方，点击【生成推广码】，即可分享给客户。'
		},
		{
			id: 5,
			title: '提现的审核时间是多久呢？',
			describe: '工作日审核时间为09:30及18:00，审核通过之后即可立即提现到账。'
		},
		{
			id: 6,
			title: '我可以发展我的下级推广方吗？',
			describe: '当然可以，您成为推广方后，可邀请您的下级推广方。'
		},
		{
			id: 7,
			title: '我可以提数据需求吗？',
			describe: '可以。我们非常欢迎各界朋友向我们提出各式各样数据需求，我们会尽全力寻找合法合规数据资源，为您提供服务！'
		}
	])
</script>

<style scoped lang="scss">
.card {
	.list {
		&_item {
			border-radius: 18rpx;
			&:nth-of-type(even) {
				background: {
					image: url('/static/image/share/bg2.svg');
					position: center;
					size: cover;
					repeat: no-repeat
				}
			}
			&:nth-of-type(odd) {
				background: {
					image: url('/static/image/share/bg1.svg');
					position: center;
					size: cover;
					repeat: no-repeat
				}
			}
			&_title {
				color: #404040;
				font: {
					size: 25rpx;
					weight: bold
				}
			}
			
			&_describe {
				line-height: 50rpx;
				font: {
					size: 23rpx;
				}
			}
		}
	}
}
</style>
